<script setup lang="ts">
import {onMounted, ref} from "vue";
import request from '../plugins/request.js'
import {showFailToast} from "vant";
import TeamCard from "../components/TeamCard.vue";
let teamList = ref([]);
const searchText = ref()
onMounted( async ()=>{
  // 获取所有的队伍
  const result = await request.get('team/list')
  const {code,data} = result
  if (code === 200){
    teamList.value = data;
  }else {
    showFailToast('获取队伍列表失败');
  }
})
// 搜索方法
const onSearch = async ()=> {
  const result = await request.get('team/list',{
    params: {
      searchText: searchText.value
    }
  })
  const {code,data} = result
  if (code === 200){
    teamList.value = data;
  }else {
    showFailToast('搜索队伍列表失败');
  }
}

</script>
<template>
  <div id="team" >

    <div id="select">
      <van-button type="success" class="teamButton" to="/team/create">创建队伍</van-button>
      <van-button type="warning" class="teamButton" to="/team/Myself">我的队伍</van-button>
    </div>
    <div id="search">
      <form action="/">
        <van-search
            v-model="searchText"
            show-action
            placeholder="请输入搜索关键词"
            @search="onSearch"
        />
      </form>
    </div>
    <van-divider
        :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
    >
      推荐队伍
    </van-divider>
    <team-card v-if="teamList.length>0" :teamList="teamList"></team-card>
    <van-empty v-else description="暂无信息"/>

    <div style="width: 100vw;height: 60px" ></div>


  </div>

</template>

<style scoped>
#select{
  width: auto;
  height: auto;
  padding: 20px 20px;
  margin: 10px 10px;
  background: rgb(247, 248, 250);
}
#select .teamButton{
  margin-left: 45px;
}
</style>